{% extends "base.html" %}

{% block title %}{{ _('settings.title') }} - {{ _('app.name') }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h2 class="card-title mb-0">{{ _('settings.header') }}</h2>
                <div class="btn-group">
                    <button class="btn btn-outline-primary" id="saveSettings">
                        <i class="bi bi-save"></i> {{ _('settings.save') }}
                    </button>
                    <button class="btn btn-outline-danger" id="resetSettings">
                        <i class="bi bi-arrow-counterclockwise"></i> {{ _('settings.reset') }}
                    </button>
                </div>
            </div>
            <div class="card-body">
                <form id="settingsForm">
                    <!-- 界面设置 -->
                    <div class="mb-4">
                        <h4>{{ _('settings.interface.title') }}</h4>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="language" class="form-label">{{ _('settings.interface.language') }}</label>
                                <select class="form-select" id="language" name="语言">
                                    {% for code, name in languages.items() %}
                                    <option value="{{ code }}" {% if current_language == code %}selected{% endif %}>{{ name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="theme" class="form-label">{{ _('settings.interface.theme') }}</label>
                                <select class="form-select" id="theme" name="主题">
                                    <option value="light">{{ _('settings.interface.theme_light') }}</option>
                                    <option value="dark">{{ _('settings.interface.theme_dark') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 摘要设置 -->
                    <div class="mb-4">
                        <h4>{{ _('settings.summary.title') }}</h4>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="algorithm" class="form-label">{{ _('settings.summary.algorithm') }}</label>
                                <select class="form-select" id="algorithm" name="摘要.算法">
                                    <option value="extractive">{{ _('settings.summary.algorithm_extractive') }}</option>
                                    <option value="abstractive">{{ _('settings.summary.algorithm_abstractive') }}</option>
                                </select>
                                <div class="form-text">{{ _('settings.summary.algorithm_help') }}</div>
                            </div>
                            <div class="col-md-6">
                                <label for="ratio" class="form-label">{{ _('settings.summary.ratio') }}: <span id="ratioValue">30%</span></label>
                                <input type="range" class="form-range" id="ratio" name="摘要.默认比例" min="0.1" max="0.5" step="0.05" value="0.3">
                                <div class="form-text">{{ _('settings.summary.ratio_help') }}</div>
                            </div>div>
                            <div class="col-md-6">
                                <label for="keywordsCount" class="form-label">{{ _('settings.summary.keywords_count') }}</label>
                                <input type="number" class="form-control" id="keywordsCount" name="摘要.关键词数量" min="3" max="20" value="10">
                                <div class="form-text">{{ _('settings.summary.keywords_count_help') }}</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文档设置 -->
                    <div class="mb-4">
                        <h4>{{ _('settings.document.title') }}</h4>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="maxFileSize" class="form-label">{{ _('settings.document.max_size') }}</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="maxFileSize" name="文档.最大大小" min="1" max="100" value="10">
                                    <span class="input-group-text">MB</span>
                                </div>
                                <div class="form-text">{{ _('settings.document.max_size_help') }}</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ _('settings.document.formats') }}</label>
                                <div class="input-group mb-2">
                                    <input type="text" class="form-control" id="newFormat" placeholder="{{ _('settings.document.formats_placeholder') }}">
                                    <button class="btn btn-outline-secondary" type="button" id="addFormatButton">
                                        <i class="bi bi-plus"></i> {{ _('settings.document.formats_add') }}
                                    </button>
                                </div>
                                <div id="formatsContainer" class="d-flex flex-wrap gap-2">
                                    <!-- 支持的格式将通过JavaScript动态加载 -->
                                </div>
                                <div class="form-text">{{ _('settings.document.formats_help') }}</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 历史记录设置 -->
                    <div class="mb-4">
                        <h4>{{ _('settings.history.title') }}</h4>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="autoSave" name="历史.自动保存" checked>
                                    <label class="form-check-label" for="autoSave">{{ _('settings.history.auto_save') }}</label>
                                </div>
                                <div class="form-text">{{ _('settings.history.auto_save_help') }}</div>
                            </div>
                            <div class="col-md-6">
                                <label for="maxCount" class="form-label">{{ _('settings.history.max_count') }}</label>
                                <input type="number" class="form-control" id="maxCount" name="历史.最大数量" min="10" max="1000" value="100">
                                <div class="form-text">{{ _('settings.history.max_count_help') }}</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Web服务设置 -->
                    <div class="mb-4">
                        <h4>{{ _('settings.web.title') }}</h4>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="host" class="form-label">{{ _('settings.web.host') }}</label>
                                <input type="text" class="form-control" id="host" name="web.主机" value="127.0.0.1">
                                <div class="form-text">{{ _('settings.web.host_help') }}</div>
                            </div>
                            <div class="col-md-6">
                                <label for="port" class="form-label">{{ _('settings.web.port') }}</label>
                                <input type="number" class="form-control" id="port" name="web.端口" min="1024" max="65535" value="8080">
                                <div class="form-text">{{ _('settings.web.port_help') }}</div>
                            </div>
                        </div>
                        <div class="alert alert-warning mt-3">
                            <i class="bi bi-exclamation-triangle-fill"></i> {{ _('settings.web.restart_notice') }}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 确认重置模态框 -->
<div class="modal fade" id="confirmResetModal" tabindex="-1" aria-labelledby="confirmResetModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmResetModalLabel">{{ _('settings.reset_modal.title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>{{ _('settings.reset_modal.message') }}</p>
                <p class="text-danger"><strong>{{ _('settings.reset_modal.warning') }}</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('settings.reset_modal.cancel') }}</button>
                <button type="button" class="btn btn-danger" id="confirmResetButton">{{ _('settings.reset_modal.confirm') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- 成功提示 -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                <i class="bi bi-check-circle-fill"></i> <span id="successMessage">{{ _('settings.alerts.save_success') }}</span>
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>

<!-- 错误提示 -->
<div class="alert alert-danger" id="errorAlert" style="display: none;" role="alert">
    <i class="bi bi-exclamation-triangle-fill"></i> <span id="errorMessage"></span>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/settings.js') }}"></script>
{% endblock %}